<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <el-card v-if="state.showSearch">
            <el-form ref="queryRef" :inline="true" :model="state.queryParams" label-width="68px">
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!--制作表格-->
        <el-card style="margin-top: 20px;">
            <el-row :gutter="10" class="mb20">
                <el-col :span="1.5">
                    <el-button v-hasPermi="['exercise:type:add']" type="primary" plain icon="Plus"
                        @click="addOrUpdateHandle(undefined,0,3)">新增类型</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
                </el-col>
            </el-row>
            <el-table v-if="refreshTable" v-loading="state.dataListLoading" :data="state.rows" style="width: 100%"
                row-key="id" :default-expand-all="isExpandAll"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column label="名称" align="left" prop="name" width="300px" />
                <el-table-column label="布局样式" align="center">
                    <template #default="scope">
                        <img v-if="scope.row.componentType===3 && scope.row.tid==null"
                            src="../../../../assets/images/type01.png">
                        <img v-else-if="scope.row.tid==null && scope.row.componentType===2"
                            src="../../../../assets/images/type02.png">
                        <img v-else-if="scope.row.tid==null && scope.row.componentType===1"
                            src="../../../../assets/images/type03.png">

                    </template>
                </el-table-column>
                <el-table-column label="图片" align="center">
                    <template #default="scope">
                        <img v-if="scope.row.path" :src="scope.row.path" width="150" />
                    </template>
                </el-table-column>
                <el-table-column label="排序" align="center" prop="orderNum" />


                <el-table-column label="操作" align="left" width="250" class-name="small-padding fixed-width">
                    <template #default="scope">

                        <el-button v-if="scope.row.componentType===3 && scope.row.tid==null"
                            v-hasPermi="['exercise:type:add']" link type="primary" plain icon="Plus"
                            @click="addOrUpdateHandle(undefined,scope.row.id,scope.row.componentType)">
                            新增type
                        </el-button>


                        <template
                            v-if="(scope.row.componentType===3 && scope.row.tid!=null) || (scope.row.componentType!==3 && scope.row.tid==null)">
                            <el-button v-hasPermi="['exercise:type:add']" link type="primary" plain icon="Plus"
                                @click="addOrUpdateHandle(undefined,scope.row.id,0)">
                                新增service
                            </el-button>
                        </template>

                        <el-button v-hasPermi="['exercise:type:edit']" link type="primary" icon="Edit"
                            @click="addOrUpdateHandle(scope.row.id,scope.row.tid,scope.row.componentType)">修改</el-button>

                    </template>
                </el-table-column>

            </el-table>

        </el-card>

        <!-- 引用新增或修改的界面 -->
        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>

    </div>
</template>

<script lang="ts" setup name="ExerciseType">
    import { IHooksOptions } from '@/hooks/hooksinterface';
    import { useCrud } from '@/hooks/hooksservice';
    /* eslint-disable camelcase */
    import { ref, reactive, getCurrentInstance, ComponentInternalInstance, nextTick } from 'vue';
    import { typeSeries } from '@/api/app/exercise/type';

    //引用新增修改组件页
    import AddOrUpdate from './add-and-edit.vue';

    // 获取当前vue3的页面this对象转换为proxy代理，查询 sys_dict_data表中的值
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;

    //是否展开节点
    const isExpandAll = ref(false);
    //刷新表格
    const refreshTable = ref(true);

    //定义接口，后台请求的API，以及查询条件的表单对象
    const state : IHooksOptions = reactive({
        queryApi: typeSeries,
        deleteApi: undefined,
        exportApi: undefined,
        //不是分页
        isPage: false,
        //主键名称
        primaryKey: 'id',
        queryForm: {
        }
    });

    /** 展开/折叠操作 */
    function toggleExpandAll() {
        refreshTable.value = false;
        isExpandAll.value = !isExpandAll.value;
        nextTick(() => {
            refreshTable.value = true;
        });
    }

    //vue3中叫组合式函数
    const { getDataList, deleteHandle, deleteBatchHandle } = useCrud(state);


    // 调用新增或修改页面的方法
    const addOrUpdateRef = ref();
    //新增或修改的时候传递id
    const addOrUpdateHandle = (id ?: number | undefined, pid ?: number, componentType = 0) => {
        //调用它里面的init方法
        addOrUpdateRef.value.init(id, pid, componentType);
    };
</script>

<style></style>
